<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .nav-top{
          background-color: #fff;
          position: relative;
          height: 50px;
        }
        .nav-left{
          position: absolute;
          height: 50px;
          left: 0;
          top: 0;
        }
        .nav-right{
          position: absolute;
          width: 200px;
          height: 50px;
          right: 0;
          top: 0;
        }
        .nav-lbottom{
          position: absolute;
          height: 50px;
          left: 0;
          bottom: 0;
        }
        .nav-rbottom{
          position: absolute;
          height: 50px;
          right: 0;
          bottom: 0;
        }
        ul{
         list-style: none;
         overflow: hidden;
         line-height: 50px;
        }
        li{
          float: left;
          margin-left: 30px;
          font-size: 13px;
        }
        li:hover{
          color:blue;
          cursor: pointer;
        }
        .a{
          color: gray;
          font-size: 10px;
          width: 85px;
        }
        .a:hover{
          color:black;
          cursor: pointer;
        }
        .b{
          color:gray;
          font-size: 1px;
          width: 130px;
        }
        .denglu{
          color:white;
          background-color:rgb(66, 66, 177);
          border-radius: 20px;
          border: 1px solid #333;
        }
        button{
          width: 90px;
          height: 46px;
          text-indent: 15px;
          background-position-y: center;
          position: absolute;
          right: 0;
          top: 0;
          border: none;
          outline: none;
        }
        .search{
          position: relative;
          width: 650px;
          height: 46px;
          border: 1px solid rgb(12, 25, 97);
          border-radius: 15px;
          overflow: hidden;
        }
        input{
          width: 560px;
          background: url("images/xiangji.jpg") no-repeat;
          background-size: 46px;
          background-position-x:510px;
          position: absolute;
          left: 0;
          right: 0;
          border: none;
          outline: none;
          height: 46px;
        }
        button{
          background-color:rgb(65, 65, 226);
          color:white;
          position: absolute;
          right: 0;
          top: 0;
        }
        .content{
          width: 680px;
          height: 600px;           
        }
        .center{
          margin-left: auto;
          margin-right: auto; 
        }
        img{
          margin-top: 40px;
          height: 120px;
        }
        .ting{
          text-align: center;
        }
        .btn{
          margin-top: 50px;
        }       
        .content-list{
          overflow: hidden;
        }
        .content-list>div{
          width: 50%;
          float:left;
        }
    </style>

</head>
<body>
<div class="nav-top">
    <div class="nav-left">
        <ul class="li"> 
            <li>新闻</li>
            <li>hao123</li>
            <li>地图</li>
            <li>视频</li>
            <li>贴吧</li>
            <li>学术</li>
            <li>更多</li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li>设置</li>
            <li class="denglu">登陆</li>
        </ul>
    </div>
</div>

<div class="content center">
    <div class="ting">
        <img src="images/timg.jpg" alt="">
    </div>
    <div class="search">
        <input type="text">
        <button>百度一下</button>
    </div>
    <p class="btn">百度热搜</p>
    <div class="content-list">
        <div class="list-left">
           <ul>
             <li>1.外交部回应义伟当选日本首相</li>
             <li>2.瑞丽已完成核酸检测全部为阴性</li>
             <li>3.老奶奶坐公交对着司机的头扫码</li>
           </ul>
        </div>
        <div class="list-right">
           <ul>
             <li>4.台湾男星黄鸿升去世</li>
             <li>5.山火中美国民众跳湖保命</li>
             <li>6.张若昀吃月子餐胖了十斤</li>
            </ul>
        </div>
    </div>
</div>

<div class="nav-bottom">
    <div class="nav-lbottom">
        <ul>
            <li class="a">设为首页</li>
            <li class="a">关于百度</li>
            <li class="a">About Baidu</li>
            <li class="a">百度营销</li>
            <li class="a">使用百度前必读</li>
            <li class="a">意见反馈</li>
            <li class="a">帮助中心</li>
        </ul>
    </div>
    <div class="nav-rbottom">
        <ul>
            <li class="b">@2020 Baidu</li>
            <li class="b">(京)-经营性-2017</li>
            <li class="b">京公网安备11002001号</li>
            <li class="b">京ICP证030173号</li>
        </ul>
    </div>
</div>
</body>
</html>